<template>
  <!-- <uv-navbar title="个人中心" bgColor="rgba(0,0,0,.5)" :fixed="true" left-icon=""></uv-navbar> -->
  <view>
    <uv-tabbar @change="changeTab" :fixed="true">
      <uv-tabbar-item text="确定" icon="checkmark-circle"></uv-tabbar-item>
      <uv-tabbar-item :text="middleButton[middle].text" :icon="middleButton[middle].icon"></uv-tabbar-item>
      <uv-tabbar-item text="返回" icon="skip-back-left"></uv-tabbar-item>
      <!-- <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item> -->
    </uv-tabbar>

  </view>
  <view>
    <uv-modal ref="modal" :content="modalContent" @confirm="confirm" :confirmText="modalConfirmText" showCancelButton
      cancelText="我再想想"></uv-modal>
    <!-- <button @click="openModal">打开</button> -->
  </view>
</template>

<script setup>
  import {
    ref,
    defineProps
  } from 'vue';
  import {
    onUnload
  } from '@dcloudio/uni-app'
  defineOptions({
    name: "bottomTab",
  })
  // 父组件要传递submit参数，用于提交，但数据是在父组件，可能要用emit或者pinia
  const props = defineProps(['type'])
  console.log(props.type);
  const modal = ref(null)
  const modalContent = ref('')
  const modalConfirmText = ref('')
  const page = getCurrentPages()
  // const index = ref(0)
  let confirm = ""

  // 变为响应式属性
  const middle = ref(props.type)
  const middleButton = ref({
    submit: {
      text: '清空',
      icon: 'reload'
    },
    edit: {
      text: '编辑',
      icon: 'edit-pen'
    }
  })
  console.log('按钮', middleButton.value[props.type]);

  const changeTab = (e) => {
    if (e === 0) {
      modalContent.value = '确定提交了吗？'
      modalConfirmText.value = "完成提交"
      confirm = () => {
        // console.log('确认提交');
        // console.log(props.submit); //后面要改成接口
        uni.$emit('bottomTabSubmit') // 可在任意页面接收该信号
        // 返回上一页面
        // uni.navigateBack(1)
      }
    } else if (e === 1) {
      if (middle.value === 'submit') {
        // console.log("清空");
        modalContent.value = '数据未提交,确定清空?'
        modalConfirmText.value = "确定清空"
        // 清空这里要重新处理下
        confirm = () => {
          uni.redirectTo({
            url: page[1].$page.fullPath
          })
        }
      }
      if (middle.value === 'edit') {
        // 进入编辑模式，并且把按钮类型更改为submit的
        console.log('modal内容');
        modalContent.value = '确定需要修改?'
        modalConfirmText.value = "确定"
        confirm = () => {
          // 发出信号改为可修改模式
          middle.value = 'submit'
        }
      }

  } else {
    modalContent.value = '数据未提交,确定返回？'
    modalConfirmText.value = "去意已决"
    modal.value.open()
    confirm = () => {
      // 返回上一页
      uni.navigateBack(1)
    }
    // uni.navigateBack(1)
    // console.log('返回上一页');
  }
  modal.value.open()
  console.log(e);
  // index.value = e
  }

  onUnload(() => {
    uni.$off('bottomTabSubmit')
  })
  // const confirm = () => {
  //   // 返回上一页
  //   uni.navigateBack(1)
  // }
</script>

<style lang="scss" scoped>

</style>